<template>
	<view class="animated fadeIn faster">
		<view class="px-3 py-3 font30">
			<view class="mb-4">
				<text class="bg-main colorfff rounded10 px-1 py font26 mr-1">单选</text>
				<text class="line-height46">{{current.title}}</text>
			</view>
			<view class="mb-5">
				<view class="mb-4" v-for="option in current.optionList" :key="option.id">
					<view class="d-flex d-flex-middle" v-if="isAnswer">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkCorrect(option.id)==1, 'an-circle-wrong': checkCorrect(option.id)==2 }">
							<text class="font26">{{option.optionNum}}</text>
						</view>
						<text>{{option.content}}</text>
					</view>
					<view class="d-flex d-flex-middle" v-else @click="handlerSelect(option)">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2">
							<text class="font26">{{option.optionNum}}</text>
						</view>
						<text>{{option.content}}</text>
					</view>
				</view>
			</view>
			<view class="bg-f2f2f2 rounded15 d-flex px-3" v-if="isAnswer">
				<view class="d-flex-item d-flex d-flex-center d-flex-middle py-3">
					<text class="font30 mr-2">正确答案</text>
					<text class="colorsuccess font32">{{correctAnswer}}</text>
				</view>
				<view class="d-flex-item d-flex d-flex-center d-flex-middle py-3">
					<text class="font30 mr-2">您选择</text>
					<text class="font32 colorf00">{{myAnswer}}</text>
				</view>
			</view>
		</view>
		<view class="fix-card left-0 right-0 bottom-0">
			<view class="px-3 d-flex d-flex-middle d-flex-between">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" style="width: 100rpx;" @click="favClick">
					<text class="iconfont font32" :class="isFav?'icon-shoucang coloryellow':'icon-shoucang1 color666'"></text>
					<text class="font22 color666" >{{isFav?'已收藏':'收藏'}}</text>
				</view>
				<view class="d-flex-item d-flex-center d-flex d-flex-middle">
					<view class="step mr-8" @click="preStep">
						<text class="font24" :class="active>0?'color666':'colorhold'">上一题</text>
					</view>
					<view class="step" @click="nextStep">
						<text class="font24" :class="active < list.length-1 ?'color666':'colorhold'">下一题</text>
					</view>
				</view>
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="openCard">
					<text class="iconfont icon-datiqia color999 font32"></text>
					<text class="font22 color666">答题卡</text>
				</view>
			</view>
		</view>
		
		<uni-popup ref="cardPopup" @touchmove.stop.prevent="moveHandle" type="bottom" style="position: relative;z-index: 999991;">
			<view class="wrap">
				<view class="py-3 d-flex d-flex-between d-flex-middle mb-3">
					<view class="pl-3" style="width: 120rpx;">{{active+1}}/{{list.length}}</view>
					<text class="font30 color000">答题卡</text>
					<view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;"><text class="iconfont icon-cuo font30 color999" @click="closeCard"></text></view>
				</view>
				<view class="pb-4">
					<scroll-view scroll-y style="height: 700rpx;" :scroll-top="scroll_top" scroll-with-animation>
						<view class="px-3 d-flex d-flex-wrap">
							<view class="span-4 d-flex d-flex-center mb-2" v-for="(an,anindex) in answers" :key="an.id">
								<view class="an-circle position-relative" :class="{ 'an-circle-correct': isAnCorrect(an)==1, 'an-circle-wrong': isAnCorrect(an)==2 }" @click="setQuestion(anindex)">
									<text>{{anindex+1}}</text>
									<view class="d-flex d-flex-center d-flex-middle an-circle-curr" v-if="active == anindex">当前</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scroll_top: 0,
				active:0,
				isFav:false,
				current:{},
				currentAnswer:{},
				answers:[
					{
						id:'13123454545456456454',
						questionId:'1924466476123721729',
						optionIdList:[],
						correct:["1924466476945805313"]
					},{
						id:'13546546541231213212',
						questionId:'1924466476136304641',
						optionIdList:[],
						correct:["1924466476945805415"]
					},{
						id:'165464654654546464545',
						questionId:'1924466476136304642',
						optionIdList:[],
						correct:["1924466476945805516"]
					},{
						id:'1354845454645646456456',
						questionId:'1924466476136304541',
						optionIdList:[],
						correct:["1924466476945805613"]
					},{
						id:'15484567464654654748454',
						questionId:'1924466476136304645',
						optionIdList:[],
						correct:["1924466476945805714"]
					},{
						id:'1365484546465465456454654',
						questionId:'1924466465136304641',
						optionIdList:[],
						correct:["1924466476945805813"]
					},{
						id:'12321546574845464654',
						questionId:'1924466165216304641',
						optionIdList:[],
						correct:["1924466476945805913"]
					},{
						id:'1324546134545645',
						questionId:'1924566161116304641',
						optionIdList:[],
						correct:["1934466476945805913"]
					},{
						id:'135465465465465465465',
						questionId:'1924366161116304641',
						optionIdList:[],
						correct:["1934466576945805916"]
					},{
						id:'123454645646545644444',
						questionId:'1924366161226304641',
						optionIdList:[],
						correct:["1935466475945805913"]
					}
				],
				list:[
					{
						id:'1924466476123721729',
						questionType: 1,
						title:'1、纯电动汽车使用最多的驱动电机是（ ）',
						optionList:[
							{
								"id": "1924466476945805313",
								"optionNum": "A",
								"content": "直流电机"
							},
							{
								"id": "1924466476945805314",
								"optionNum": "B",
								"content": "感应异步电机",
							},
							{
								"id": "1924466476945805315",
								"optionNum": "C",
								"content": "永磁同步电机",
							},
							{
								"id": "1924466476945805316",
								"optionNum": "D",
								"content": "开关磁阻电机"
							}
						]
					},{
						id: "1924466476136304641",
						questionType: 1,
						title: "2、不属于纯电动汽车的部件是 （ ）",
						optionList:[
							{
								"id": "1924466476945805413",
								"optionNum": "A",
								"content": "动力电池"
							},
							{
								"id": "1924466476945805414",
								"optionNum": "B",
								"content": "增程器",
							},
							{
								"id": "1924466476945805415",
								"optionNum": "C",
								"content": "电机控制器",
							},
							{
								"id": "1924466476945805416",
								"optionNum": "D",
								"content": "电机"
							}
						]
					},{
						id: "1924466476136304642",
						title: "3、电动汽车正确掌握充电时间，以下哪个不正确？（ ）",
						questionType: 1,
						optionList:[
							{
								"id": "1924466476945805513",
								"optionNum": "A",
								"content": "动力电池"
							},
							{
								"id": "1924466476945805514",
								"optionNum": "B",
								"content": "增程器",
							},
							{
								"id": "1924466476945805515",
								"optionNum": "C",
								"content": "电机控制器",
							},
							{
								"id": "1924466476945805516",
								"optionNum": "D",
								"content": "电机"
							}
						]
					},{
						id: "1924466476136304541",
						title: "4、新能源汽车的关键零部件不包括 （ ）",
						questionType: 1,
						optionList:[
							{
								"id": "1924466476945805613",
								"optionNum": "A",
								"content": "驱动电机"
							},
							{
								"id": "1924466476945805614",
								"optionNum": "B",
								"content": "动力电池系统",
							},
							{
								"id": "1924466476945805615",
								"optionNum": "C",
								"content": "髙压总成",
							},
							{
								"id": "1924466476945805616",
								"optionNum": "D",
								"content": "制动器"
							}
						]
					},{
						id: "1924466476136304645",
						title: "5、电机基本参数包括额定容量和（ ）",
						questionType: 1,
						optionList:[
							{
								"id": "1924466476945805713",
								"optionNum": "A",
								"content": "峰值功率"
							},
							{
								"id": "1924466476945805714",
								"optionNum": "B",
								"content": "峰值转矩",
							},
							{
								"id": "1924466476945805715",
								"optionNum": "C",
								"content": "额定转速",
							},
							{
								"id": "1924466476945805716",
								"optionNum": "D",
								"content": "以上都是"
							}
						]
					},{
						id: "1924466465136304641",
						title: "6、新能源车是指的采用（ ）作为动力来源，综合车辆的动力控制和驱动方面的先进技术，形成的技术原理先进具有新技术新结构的汽车。",
						questionType: 1,
						optionList:[
							{
								"id": "1924466476945805813",
								"optionNum": "A",
								"content": "甲醇"
							},
							{
								"id": "1924466476945805814",
								"optionNum": "B",
								"content": "电能",
							},
							{
								"id": "1924466476945805815",
								"optionNum": "C",
								"content": "太阳能",
							},
							{
								"id": "1924466476945805816",
								"optionNum": "D",
								"content": "一切新型能源"
							}
						]
					},{
						id: "1924466165216304641",
						title: "7、慢充充电时，必须由（ ）将交流电转换成直流电才能给动力电池充电。",
						questionType: 1,
						optionList:[
							{
								"id": "1924466476945805913",
								"optionNum": "A",
								"content": "DC-DC转化器"
							},
							{
								"id": "1924466476945805914",
								"optionNum": "B",
								"content": "车载充电机",
							},
							{
								"id": "1924466476945805915",
								"optionNum": "C",
								"content": "电机控制器",
							},
							{
								"id": "1924466476945805916",
								"optionNum": "D",
								"content": "整车控制器"
							}
						]
					},{
						id: "1924566161116304641",
						title: "8、纯电动汽车是指以车载电源为动力源，用（ ）驱动车轮行驶，符合道路交通安全法规各项要求的车辆。",
						questionType: 1,
						optionList:[
							{
								"id": "1934466476945805913",
								"optionNum": "A",
								"content": "电动机"
							},
							{
								"id": "1934466476945805914",
								"optionNum": "B",
								"content": "汽油机",
							},
							{
								"id": "1934466476945805915",
								"optionNum": "C",
								"content": "柴油机",
							},
							{
								"id": "1934466476945805916",
								"optionNum": "D",
								"content": "发电机"
							}
						]
					},{
						id: "1924366161116304641",
						title: "9、以下不属于纯电动汽车的优点的是 （ ）",
						questionType: 1,
						optionList:[
							{
								"id": "1934466475945805913",
								"optionNum": "A",
								"content": "废气污染噪声小"
							},
							{
								"id": "1934466475945805914",
								"optionNum": "B",
								"content": "结构简单维修方便",
							},
							{
								"id": "1934466446945805915",
								"optionNum": "C",
								"content": "续航里程长",
							},
							{
								"id": "1934466576945805916",
								"optionNum": "D",
								"content": "能量转换率高"
							}
						]
					},{
						id: "1924366161226304641",
						title: "10、纯电动汽车与传统燃油汽车相比，优点有 （ ）",
						questionType: 1,
						optionList:[
							{
								"id": "1935466475945805913",
								"optionNum": "A",
								"content": "节能环保"
							},
							{
								"id": "1935466475945805914",
								"optionNum": "B",
								"content": "动力性好",
							},
							{
								"id": "1935466446945805915",
								"optionNum": "C",
								"content": "结构简单",
							},
							{
								"id": "1935466576945805916",
								"optionNum": "D",
								"content": "以上全是"
							}
						]
					}
				]
			}
		},
		onReady() {
			this.current = this.list[0]
		},
		computed:{
			isAnswer() {
				let answer = this.answers.find(ans => ans.questionId == this.current.id)
				if(answer && answer.optionIdList && answer.optionIdList.length>0){
					return true
				}else{
					return false
				}
			},
			isAnCorrect(){
				return function(answ){
					if(answ.optionIdList.length>0){
						if(answ.optionIdList[0] == answ.correct[0]){
							return 1
						}else{
							return 2
						}
					}else{
						return 0
					}
				}
			},
			myAnswer(){
				let myOptionId = this.answers[this.active].optionIdList[0]
				let myAnswerMsg = this.current.optionList.find(oli=>oli.id == myOptionId)
				return myAnswerMsg.optionNum
			},
			correctAnswer(){
				let correctOptionId = this.answers[this.active].correct[0]
				let correctAnswerMsg = this.current.optionList.find(oli=>oli.id == correctOptionId)
				return correctAnswerMsg.optionNum
			}
		},
		watch:{
			active(newActive,oldActive){
				this.current = this.list[newActive]
			}
		},
		methods: {
			checkCorrect(optionId){
				let that = this
				if(that.answers[that.active].correct[0] == optionId){
					return 1
				}
				if(that.answers[that.active].optionIdList[0] == optionId){
					return 2
				}
				return 0
			},
			favClick(){
				this.isFav = !this.isFav
			},
			handlerSelect(item){
				let that = this
				const index = that.answers.findIndex(ans => ans.questionId == that.current.id)
				if(that.answers[index].optionIdList.length == 0){
					that.answers[index].optionIdList[0] = item.id
				}
			},
			preStep(){
				if (this.active > 0) {
				    this.active--
				}
			},
			nextStep(){
				if (this.active < this.list.length - 1) {
				    this.active++
				}else{
					uni.showToast({
						title:'没有更多试题了！',
						icon:'none'
					})
				}
			},
			openCard(){
				this.$refs.cardPopup.open()
			},
			closeCard(){
				this.$refs.cardPopup.close()
			},
			setQuestion(index){
				this.active = index
				this.$refs.cardPopup.close()
			},
			moveHandle() {
				return false
			},
		}
	}
</script>

<style scoped>
.answer-option{
	width: 56rpx;
	height: 56rpx;
	border-radius: 56rpx;
	background-color: #fff;
	border: solid 1px #f9f9f9;
}
.correct-option{
	background-color: #3dc092;
	border-color: #3dc092;
	color: #ffffff;
}
.error-option{
	background-color: #f5615e;
	border-color: #f5615e;
	color: #ffffff;
}
.fix-card{
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	position: fixed;
	border-top: solid 1px #ebebeb;
	background-color: #f5f5f7;
}
.step{
	border: solid 1px #ddd;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}
.an-circle{
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;;
	border-radius: 80rpx;
	border: solid 1px #dddddd;
	overflow: hidden;
}
.an-circle-curr{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rpx;
	background-color: rgba(0,0,0,.6);
	font-size: 18rpx;
	color:#fff
}
.an-circle-correct{
	background-color: #3dc092;
	color: #fff;
	border-color: #3dc092;
}
.an-circle-wrong{
	background-color: #f5615e;
	color: #fff;
	border-color: #f5615e;
}
</style>
